<template>
  <div class="home">
    <home-header :city="city"></home-header>
    <home-swiper :list="swiperList"></home-swiper>
    <home-icons :iconList='iconList'></home-icons>
    <home-recommend :list="recommendList"></home-recommend>
    <home-weekend :list="weekendList"></home-weekend>
  </div>
</template>
<script>
import homeHeader from "./components/Header";
import homeSwiper from "./components/Swiper";
import homeIcons from "./components/Icons";
import homeRecommend from "./components/Recommend";
import homeWeekend from "./components/Weekend";
import axios from "axios";
export default {
  data() {
    return {
      city: "",
      swiperList: [],
      iconList: [],
      recommendList: [],
      weekendList: []
    };
  },
  components: {
    homeHeader,
    homeSwiper,
    homeIcons,
    homeRecommend,
    homeWeekend
  },
  mounted() {
    this.getHomeInfo();
    setTimeout(() => {
      // console.log(this.swiperList);
    }, 1000);
  },
  methods: {
    getHomeInfo() {
      axios.get("/api/index.json").then(res => {
        // console.log(res);
        let data = res.data;
        let ret = data.ret;
        if (ret && data) {
          let data = res.data.data;
          this.city = data.city;
          this.swiperList = data.swiperList;
          this.iconList = data.iconList;
          this.recommendList = data.recommendList;
          this.weekendList = data.weekendList;
        }
      });
    }
  }
};
</script>